<template>
  <div :style="{bottom: `${safeDistance}rpx`}" class="prm-tab">
    <div
      :style="{
        height: '100%',
        backgroundSize: '100%',
      }"
      class="prm-tab-bg"
    >
      <div
        :style="{height: `${safeDistance}rpx`, bottom: `-${safeDistance}rpx`}"
        class="safe_distance"
      />
    </div>
    <div
      v-for="d in tabbar"
      :key="d?.push || d"
      :class="['_item', currentRoute(d?.push) ? '_act' : '']"
      @tap="goView(d?.push)"
    >
      <Icon v-if="currentRoute(d?.push)" :name="d.actIcon" height="40rpx" />
      <Icon v-else :name="d.icon" height="40rpx" />
      <div :style="{marginTop: '12rpx', fontSize: '24rpx'}">{{ d.label }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import Icon from '@C/Icon.vue'
import { onLoad, onShow, Router, storeState, storeCommit } from '@U/common'
import type { IObj } from '@/interface'

const safeDistance = ref(0)
const routeUrl = ref('')
const routeName = ref('')
const currentRoute = (t: string) => (t === routeUrl.value || t === routeName.value)
const goView = (path: string) => {
  if (currentRoute(path)) return
  Router.push(path, {}, 'tab')
}
onLoad(() => {
  // ios安全高度
  if (storeState.system?.osName === 'ios') {
    safeDistance.value = storeState.system?.safeAreaInsets?.bottom || 24
  }
})
onShow(() => {
  // 当前路由
  routeUrl.value = Router.route().path
  routeName.value = Router.route().name
  // ios安全高度
  if (storeState.system?.osName === 'ios') {
    safeDistance.value = storeState.system?.safeAreaInsets?.bottom || 24
  }
})

const tabbar = computed(() => ([
  { label: '工作台', icon: 'icon-gongzuotaiweixuanzhong', actIcon: 'icon-gongzuotaixuanzhong', push: 'workbench' },
  { label: '业务管理', icon: 'icon-a-yewuweixuanzhong', actIcon: 'icon-a-yewuxuanzhong', push: 'operation' },
  { label: '发票管理', icon: 'icon-piaowuguanli', actIcon: 'icon-piaowuguanli-xuanzhong', push: 'ticket' },
  { label: '营销中心', icon: 'icon-ziliaokuweixuanzhong', actIcon: 'icon-ziliaokuxuanzhong', push: 'marketCenter' },
  { label: '我的', icon: 'icon-wodeweixuanzhong', actIcon: 'icon-wodexuanzhong', push: 'user' },
].filter((tab: IObj | string | null) => !!tab)))
</script>

<style lang="less" scoped>
.prm-tab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 999;
  box-shadow: 20px 20px 20px 5px #000;
  .prm-tab-bg {
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 90;
    background: #fff;
    .safe_distance {
      position: absolute;
      left: 0;
      right: 0;
      background: white;
      width: 100vw;
    }
  }
  ._qrcode {
    flex: 0 0 200rpx;
    height: 100rpx;
    position: relative;
    z-index: 100;
    ._code {
      position: absolute;
      top: -24rpx;
      left: 0;
      right: 0;
      margin: auto;
      width: 115rpx;
      height: 115rpx;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  ._item {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 18rpx;
    align-items: center;
    color: #aeaeae;
    font-size: 20rpx;
    position: relative;
    z-index: 95;
  }
  ._act {
    color: #1890FF;
  }
}
</style>
